<template>
    <view class="type-area cus-page">
		<!-- BG -->
		<image class="bg" src="/static/me/me_head_bg.png" alt=""></image>

		<!-- 顶部安全距离 -->
		<u-gap :height="topHeight+'px'" bgColor="transparent"></u-gap>

		<!-- User -->
		<view class="com-flex user">
			<image class="head" src="/static/temporary/img3.jpg" alt="" @tap="show=true"></image>
			<view>
				<view class="com-flex">
					<text class="com-font-36 com-font-bold" @tap="show=true">叶赫那拉歌灵</text>
					<view class="com-m-l-16 com-flex" @tap="goGrade">
						<image class="icon" src="/static/me/me_grade.png" alt=""></image>
						<view class="com-font-24 com-active-color text">LV.1</view>
					</view>
				</view>
				<text class="com-m-t-24 com-font-24 com-assist-color">UID: 5248614</text>
			</view>
		</view>

		<!-- 我的订单 || 日拍中心 -->
		<view v-for="(tem,ind) in cardList" :key="ind" class="com-m-t-20 card">
			<view class="com-flex com-row-between">
				<text class="com-font-32 com-font-bold">{{tem.title}}</text>
				<view class="com-flex" @tap="jump(tem.more)">
					<text class="com-m-r-16 com-font-26 com-assist-color">{{tem.text}}</text>
					<u-icon name="arrow-right" top="2rpx" size="26rpx" color="#999"></u-icon>
				</view>
			</view>
			<view class="com-m-t-38 com-flex com-row-between items">
				<view v-for="(item,index) in tem.list" :key="index" @tap="jump(item.url)"
					class="com-flex-col com-row-center com-col-center">
					<image :src="item.icon" alt=""></image>
					<text class="com-m-t-12 com-font-26">{{item.title}}</text>
				</view>
			</view>
		</view>

		<!-- 列表 -->
		<view class="com-m-t-20 list">
			<view v-for="(item,index) in rowList" :key="index" @tap="jump(item.url)"
				class="com-flex com-row-between item">
				<view class="com-flex">
					<image :src="item.icon" alt=""></image>
					<text class="com-m-l-24 com-font-32">{{item.title}}</text>
				</view>
				<u-icon name="arrow-right" top="2rpx" size="32rpx" color="#999"></u-icon>
			</view>
		</view>

		<!-- 修改个人信息 -->
		<u-popup :show="show" safeAreaInsetBottom
			bgColor="transparent"
			:closeOnClickOverlay="false"
			@close="show=false">
            <view class="popup">
				<view class="com-p-l-32 com-p-r-32 com-flex com-row-between">
					<view class="com-m-r-36"></view>
					<text class="com-font-32 com-font-bold">修改个人信息</text>
					<u-icon name="close" top="2rpx" size="36rpx" color="#999" @tap="show=false"></u-icon>
				</view>
				<view class="com-m-t-20">
					<view class="com-flex com-row-between item">
						<text class="com-font-32 com-minor-color">头像</text>
						<view class="com-flex">
							<image class="head" src="/static/temporary/img3.jpg" alt=""></image>
							<u-icon name="arrow-right" top="2rpx" size="32rpx" color="#999"></u-icon>
						</view>
					</view>
					<view class="com-flex com-row-between item">
						<text class="com-font-32 com-minor-color">昵称</text>
						<input class="uni-input" value="叶赫那拉歌灵" />
					</view>
				</view>
                <u-gap height="20rpx" bgColor="#F8F8F8"></u-gap>
				<view class="type-area com-p-t-20 com-p-b-20" style="background:#fff">
					<u-button text="保存" 
						shape="circle"
						color=" linear-gradient(-90deg, #C3B0FF 0%, #39E3FD 100%)">
					</u-button>
				</view>
            </view>
		</u-popup>
	</view>
</template>

<script>
export default {
    name:'me',
    components: {},
    props:{},

    data () {
		return {
			topHeight: 10, // 顶部安全距离
			cardList: [
				{
					title: "我的订单",
					text: "全部订单",
					more: "/pages/me/order-list?status=0",
					list: [
						{icon:"/static/me/me_dfk.png", title: "待付款", url: "/pages/me/order-list?status=1"},
						{icon:"/static/me/me_yrk.png", title: "已入库", url: "/pages/me/order-list?status=2"},
						{icon:"/static/me/me_wtjs.png", title: "委托寄售", url: "/pages/me/order-list?status=3"},
						{icon:"/static/me/me_zypt.png", title: "直邮/拼团", url: "/pages/me/order-list?status=4"},
						{icon:"/static/me/me_yfh.png", title: "已发货", url: "/pages/me/order-list?status=5"},
					]
				},
				{
					title: "日拍中心",
					text: "竞拍中心",
					more: "",
					list: [
						{icon:"/static/me/me_jpz.png", title: "竞拍中", url: ""},
						{icon:"/static/me/me_ydb.png", title: "已得标", url: ""},
						{icon:"/static/me/me_wdb.png", title: "未得标", url: ""},
						{icon:"/static/me/me_qxtk.png", title: "取消/退款", url: ""},
						{icon:"/static/me/me_gzlb.png", title: "关注列表", url: ""},
					]
				}
			],
			rowList: [
				{icon:"/static/me/me_kq.png", title: "我的卡券", url: "/pages/me/card-voucher-center"},
				{icon:"/static/me/me_jf.png", title: "积分", url: "/pages/me/integral"},
			],
			// 修改个人信息
			show: false
		}
    },

    computed: {},
    watch: {
		show(newVavue){
			if(newVavue){
				uni.hideTabBar()
			}else{
				setTimeout(() => {
					uni.showTabBar()
				}, 300);
			}
		}
	},

	onLoad(){
		this.setTopHeight()
	},
    mounted() {},

    methods: {
		// 设置顶部安全距离
		setTopHeight(){
			const sysInfo = this.mixinGetSysInfo();
			const statusBarHeight = sysInfo.statusBarHeight;
			//  #ifdef MP-WEIXIN
			const navBarH = sysInfo.capsule.navBarH;
			this.topHeight = statusBarHeight + navBarH;
			//  #endif
			//  #ifdef APP-PLUS
			this.topHeight = statusBarHeight + 44;
			//  #endif
		},

		// 查看会员等级
		goGrade(){
			uni.navigateTo({
				url: "/pages/me/member-grade"
			})
		},

		// 跳转
		jump(url){
			if(url){
				uni.navigateTo({ url: url })
			}else{
				uni.$u.toast("未发现相关UI设计")
			}
		}
	},
}
</script>

<style scoped lang='scss'>
	.bg{
		width: 100%;
		height: 480rpx;
		position: fixed;
		top: 0;
		left: 0;
	}
	.user{
		margin-bottom: 48rpx;
		position: relative;
		z-index: 100;
		.head{
			width: 132rpx;
			height: 132rpx;
			margin-right: 36rpx;
			border-radius: 50%;
			border: 2px solid #02BDF3;
		}
		.icon{
			width: 48rpx;
			height: 48rpx;
			margin-top: 2rpx;
			position: relative;
			z-index: 100;
		}
		.text{
			background: #fff;
			padding: 4rpx 24rpx 4rpx 34rpx;
			border-radius: 0 36rpx 36rpx 0;
			margin-left: -24rpx;
			position: relative;
			z-index: 90;
		}
	}
	.card{
		background: #fff;
		padding: 30rpx 32rpx;
		border-radius: 24rpx;
		position: relative;
		z-index: 100;
		image{
			width: 64rpx;
			height: 64rpx;
		}
	}
	.list{
		background: #fff;
		padding: 0 32rpx;
		border-radius: 24rpx;
		position: relative;
		z-index: 100;
		.item{
			padding: 28rpx 0;
			border-bottom: 1px solid #F8F8F8;
			&:last-child{
				border: none;
			}
			image{
				width: 44rpx;
				height: 44rpx;
			}
		}
	}
	/deep/.popup{
		background: #fff;
		border-radius: 24rpx 24rpx 0 0;
		padding: 38rpx 0 0 0;
		.item{
			padding: 32rpx;
			border-bottom: 1px solid #F8F8F8;
			.head{
				width: 80rpx;
				height: 80rpx;
				margin-right: 28rpx;
				border-radius: 50%;
			}
			.uni-input{
				text-align: right;
			}
		}
	}
	/deep/.u-safe-bottom{
		background: #fff !important;
	}
</style>